<template>
  <div class="app-container">
    <div class="searchMultiple" style="width: 100%">
      <el-input
        v-model="searchData.title"
        placeholder="标题"
        clearable
        class="input"
        style="width: 10%"
        @change="numberInputChange"
      />
      <el-select v-model="searchData.type" style="margin-left: 5px" clearable placeholder="请选择">
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button style="margin-left: 1%" type="primary" round icon="el-icon-close" @click="clearContent">清空</el-button>
      <el-button style="margin-left: 1%" type="primary" round icon="el-icon-search" @click="search">搜索</el-button>
      <el-button style="float: right" size="medium" type="primary" round @click="publishPage">发布</el-button>
    </div>

    <!--表格信息start-->
    <div class="tableList" style="margin-top: 20px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >

        <el-table-column
          prop="title"
          label="标题"
          align="center"
        />
        <el-table-column
          prop="content"
          label="内容"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.content | ellipsis }}
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          align="center"
        />
        <el-table-column
          prop="heat"
          label="热度"
          align="center"
        />
        <el-table-column
          prop="createAt"
          label="发布时间"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createAt | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="130%"
          align="center"
        >
          <template slot-scope="scope">
            <div style="display: flex;flex-direction: row;justify-content: center">
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteById(scope.row.id)">删除</el-button>
              <el-button size="mini" type="warning" icon="el-icon-edit" @click="editNews(scope.row)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--表格信息end-->

    <!--分页插件start-->
    <el-pagination
      style="margin-top: 1%;display: flex;justify-content: right"
      background
      layout="prev, pager, next"
      :page-size="size"
      :total="total"
      :current-page.sync="searchData.pageNumber"
      @current-change="currentChange"
    />
    <!--分页插件end-->
  </div>
</template>

<script>

import { parseTime } from '@/utils'
import { userGetNewList } from '@/api/new'

export default {
  filters: {
    formatTime(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}')
    },
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 30) {
        return value.slice(0, 30) + '...'
      }
      return value
    }
  },
  data() {
    return {
      total: 0, // 总记录数
      size: 0, // 每页大小
      tableData: [],
      searchData: {
        title: '',
        type: null,
        pageSize: 5,
        pageNumber: 1
      },
      typeList: [{
        value: 1,
        label: '新闻'
      }, {
        value: 2,
        label: '咨询'
      }, {
        value: 3,
        label: '公告'
      }]
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    publishPage() {
      this.$router.replace({
        path: '/news/newPublish'
      })
    },
    numberInputChange(value) { // 小区编号输入框chang函数
      if (value === '' || value == null) {
        this.searchData.number = null
      }
    },
    currentChange(val) { // 点击分页栏方法
      this.searchData.pageNumber = val
      this.getNewsList()
    },
    getNewsList() { // 获取新闻资讯列表（分页）
      userGetNewList(this.searchData).then(res => {
        this.tableData = res.data.records
        this.size = res.data.size
        this.total = res.data.total
      })
    },
    search() { // 点击搜索按钮
      this.getNewsList()
    },
    clearContent() { // 清空输入框方法
      this.searchData.title = null
      this.searchData.type = null
      this.searchData.pageNumber = 1
      this.getNewsList()
    },
    editNews(item) {
      this.$router.replace({
        path: '/news/newPublish',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
